
<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="项目空间">
        <el-select v-model="searchParam.workspace_id" placeholder="请选择">
          <el-option
            v-for="item in workspaces"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="统计区间">
        <el-date-picker
          v-model="searchParam.datevalue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
          导出Excel
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="path"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="owner" label="测试人员" sortable />
      <el-table-column label="测试计划" header-align="center">
        <el-table-column prop="count" label="执行用例数" default="0" sortable />
        <el-table-column prop="hghour" label="回归时长" default="0" sortable />
      </el-table-column>
      <el-table-column label="新增用例" header-align="center">
        <el-table-column prop="new" label="总数" default="0" sortable />
        <el-table-column prop="ui_rate" label="UI自动化" default="0" sortable>
          <template slot-scope="scope">
            {{ scope.row.ui }}    |    {{ scope.row.ui_rate }}
          </template>
        </el-table-column>
        <el-table-column prop="api_rate" label="接口自动化" default="0" sortable>
          <template slot-scope="scope">
            {{ scope.row.api }}    |    {{ scope.row.api_rate }}
          </template>
        </el-table-column>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
import { getWorkspaces, getTPlans } from '@/api/eff/tapd'
import { parseTime } from '@/utils/index'
import moment from 'moment'

export default {
  data() {
    return {
      tableData: [],
      tablePageSize: 10,
      tablePage: 1,
      tableTotal: 0,
      listLoading: true,
      downloadLoading: false,
      searchParam: { datevalue: [], workspace_id: '' },
      formLabelWidth: '120px',
      datestart: '',
      dateend: '',
      rules: {
        workspace_id: [{ required: true }]
      }
    }
  },
  created() {
    this.initSearch()
    this.fetchData()
  },
  methods: {
    initSearch() {
      const day1 = new Date()
      const day2 = new Date()
      const week = new Date().getDay()
      day1.setDate(day1.getDate() - week - 6)
      day2.setDate(day2.getDate() - week)
      const start = moment(day1).format('YYYY-MM-DD')
      const end = moment(day2).format('YYYY-MM-DD')
      this.searchParam.datevalue = [start, end]
      getWorkspaces().then(response => {
        this.workspaces = response.data
        this.searchParam.workspace_id = response.data[0].id
      })
    },
    fetchData() {
      this.listLoading = true
      const [start, end] = this.searchParam.datevalue
      this.datestart = start
      this.dateend = end
      //   const params = Object.assign(this.searchParam, { 'cr': start, 'end': end })
      const params = { 'workspace_id': this.searchParam.workspace_id, 'created': start + '~' + end }
      getTPlans(params).then(response => {
        this.tableData = response.data
        this.listLoading = false
      })
    },
    handleDownload() {
      this.downloadLoading = true
      const tHeader = ['测试人员', '执行用例数', '回归时长', '新增用例数', 'UI自动化', 'UI自动化占比', '接口自动化', '接口自动化占比']
      const filterVal = ['owner', 'count', 'hghour', 'new', 'ui', 'ui_rate', 'api', 'api_rate']
      const list = this.tableData
      const data = this.formatJson(filterVal, list)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: '测试计划统计_' + this.datestart + '_' + this.dateend, // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
      this.downloadLoading = false
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style>

</style>
